<template>
	<view>
		<view style="display: flex;flex-direction: row;">
			
		</view>
		<view class="uni-container" v-if="selected=='1'">
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-thead>
					<uni-tr>

						<uni-th width="150" align="center">
							<select v-model="selected" @change="handleSelectChange">
								<option v-for="option in options" :value="option.value" :key="option.value">
									类型：{{ option.text }}
								</option>
							</select></uni-th>
						<uni-th width="150" align="center">
							分组方式
							<select v-model="typeSelected" @change="handleStypeSelectChange">
								<option v-for="option in typeOptions" :value="option.value" :key="option.value">
									{{ option.text }}
								</option>
							</select>
						</uni-th>
						<uni-th align="center">
							<view @click="exportToExcel">导出Excel</view>
						</uni-th>
						
					</uni-tr>

				</uni-thead>
				<uni-tr>
					<uni-th align="center">产线</uni-th>
					<uni-th align="center">干湿法</uni-th>
					<uni-th align="center">工单类型</uni-th>
					<uni-th align="center">工单编码</uni-th>
					<uni-th align="center">配方</uni-th>
					<uni-th align="center">膜片类型</uni-th>
					<uni-th align="center">计划数量</uni-th>
					<uni-th align="center">单位</uni-th>
					<uni-th align="center">计划开始时间</uni-th>
					<uni-th align="center">计划结束时间</uni-th>
					<uni-th align="center">产品类型</uni-th>
					<uni-th align="center">状态</uni-th>
					<uni-th align="center">部门</uni-th>
					<uni-th align="center">修改人</uni-th>
					<uni-th align="center">创建日期</uni-th>
					<uni-th align="center">修改日期</uni-th>
					<uni-th align="center">开工日期</uni-th>
					<uni-th align="center">批次号</uni-th>
					<uni-th align="center">备注</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.prod_line_id }}</uni-td>
					<uni-td align="center">{{getGS(item.product_group)}}</uni-td>
					<uni-td align="center">{{getOrderType(item.order_type)}}</uni-td>
					<uni-td align="center">{{item.name}}</uni-td>
					<uni-td align="center">{{item.sm_recipe.name}}</uni-td>
					<uni-td align="center">{{ getMPType(item.segment3_id)}}</uni-td>
					<uni-td align="center">{{item.plan_qty}}</uni-td>
					<uni-td align="center">{{item.unit2}}</uni-td>
					<uni-td align="center">{{item.plan_start_time}}</uni-td>
					<uni-td align="center">{{item.plan_end_time}}</uni-td>
					<uni-td align="center">{{getPro_type(item.pro_type)}}</uni-td>
					<uni-td align="center">{{getStatusTxt(item.status)}}</uni-td>
					<uni-td align="center">{{item.department.name}}</uni-td>
					<uni-td align="center">{{item.updater.name}}</uni-td>
					<uni-td align="center">{{item.created_at}}</uni-td>
					<uni-td align="center">{{item.updated_at}}</uni-td>
					<uni-td align="center">{{item.actual_started_time}}</uni-td>
					<uni-td align="center">{{item.inductance_lot}}</uni-td>
					<uni-td align="center">{{item.customer_remark}}</uni-td>
				</uni-tr>




			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
					:total="total" @change="change" /></view>
		</view>
		
		<view class="uni-container" v-else-if="selected=='2'">
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-thead>
					<uni-tr>
		
						<uni-th width="150" align="center">
							<select v-model="selected" @change="handleSelectChange">
								<option v-for="option in options" :value="option.value" :key="option.value">
									类型：{{ option.text }}
								</option>
							</select></uni-th>
						<uni-th width="150" align="center">
							分组方式
							<select v-model="typeSelected" @change="handleStypeSelectChange">
								<option v-for="option in typeOptions" :value="option.value" :key="option.value">
									{{ option.text }}
								</option>
							</select>
						</uni-th>
						<uni-th align="center">
							<view @click="exportToExcel">导出Excel</view>
						</uni-th>
						
					</uni-tr>
		
				</uni-thead>
				<uni-tr>
					<uni-th align="center">产线</uni-th>
					<uni-th align="center">干湿法</uni-th>
					<uni-th align="center">工单类型</uni-th>
					<uni-th align="center">工单编码</uni-th>
					<uni-th align="center">批次号</uni-th>
					<uni-th align="center">膜片物料编码</uni-th>
					<uni-th align="center">规格型号</uni-th>
					<uni-th align="center">膜片类型</uni-th>
					<uni-th align="center">计划数量</uni-th>
					<uni-th align="center">膜片物料编码2</uni-th>
					<uni-th align="center">规格型号2</uni-th>
					<uni-th align="center">计划数量2</uni-th>
					<uni-th align="center">膜片物料编码3</uni-th>
					<uni-th align="center">规格型号3</uni-th>
					<uni-th align="center">计划数量3</uni-th>
					<uni-th align="center">膜片物料编码4</uni-th>
					<uni-th align="center">规格型号4</uni-th>
					<uni-th align="center">计划数量4</uni-th>
					<uni-th align="center">膜片物料编码5</uni-th>
					<uni-th align="center">规格型号5</uni-th>
					<uni-th align="center">计划数量5</uni-th>
					<uni-th align="center">配方</uni-th>
					<uni-th align="center">单位</uni-th>
					<uni-th align="center">计划开始时间</uni-th>
					<uni-th align="center">计划结束时间</uni-th>
					<uni-th align="center">产品类型</uni-th>
					<uni-th align="center">状态</uni-th>
					<uni-th align="center">部门</uni-th>
					<uni-th align="center">修改人</uni-th>
					<uni-th align="center">创建日期</uni-th>
					<uni-th align="center">修改日期</uni-th>
					<uni-th align="center">开工日期</uni-th>
					<uni-th align="center">滤芯精度</uni-th>
					<uni-th align="center">膜厚代码</uni-th>
					<uni-th align="center">PET尺寸</uni-th>
					<uni-th align="center">PET类型</uni-th>
					<uni-th align="center">膜厚代码2</uni-th>
					<uni-th align="center">PET尺寸2</uni-th>
					<uni-th align="center">PET类型2</uni-th>
					<uni-th align="center">膜厚代码3</uni-th>
					<uni-th align="center">PET尺寸3</uni-th>
					<uni-th align="center">PET类型3</uni-th>
					<uni-th align="center">膜厚代码4</uni-th>
					<uni-th align="center">PET尺寸4</uni-th>
					<uni-th align="center">PET类型4</uni-th>
					<uni-th align="center">膜厚代码5</uni-th>
					<uni-th align="center">PET类型5</uni-th>
					<uni-th align="center">PET尺寸5</uni-th>
					<uni-th align="center">批次号</uni-th>
					<uni-th align="center">备注</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.prod_line_id }}</uni-td>
					<uni-td align="center">{{getGS(item.product_group)}}</uni-td>
					<uni-td align="center">{{getOrderType(item.order_type)}}</uni-td>
					<uni-td align="center">{{item.name}}</uni-td>
					<uni-td align="center">{{item.inductance_lot}}</uni-td>
					<uni-td align="center">{{checkName(item.prod)}}</uni-td>
					<uni-td align="center">{{item.spec}}</uni-td>
					<uni-td align="center">{{ getMPType(item.segment3_id)}}</uni-td>
					<uni-td align="center">{{item.plan_qty}}</uni-td>
					<uni-td align="center">{{checkName(item.prod2)}}</uni-td>
					<uni-td align="center">{{item.spec2}}</uni-td>
					<uni-td align="center">{{item.plan_qty2}}</uni-td>
					<uni-td align="center">{{checkName(item.prod3)}}</uni-td>
					<uni-td align="center">{{item.spec3}}</uni-td>
					<uni-td align="center">{{item.plan_qty3}}</uni-td>
					<uni-td align="center">{{checkName(item.prod4)}}</uni-td>
					<uni-td align="center">{{item.spec4}}</uni-td>
					<uni-td align="center">{{item.plan_qty4}}</uni-td>
					<uni-td align="center">{{checkName(item.prod5)}}</uni-td>
					<uni-td align="center">{{item.plan_qty5}}</uni-td>
					<uni-td align="center">{{item.plan_qty5}}</uni-td>
					<uni-td align="center">{{item.sm_recipe.name}}</uni-td>
					<uni-td align="center">{{item.unit2}}</uni-td>
					<uni-td align="center">{{item.plan_start_time}}</uni-td>
					<uni-td align="center">{{item.plan_end_time}}</uni-td>
					<uni-td align="center">{{getPro_type(item.pro_type)}}</uni-td>
					<uni-td align="center">{{getStatusTxt(item.status)}}</uni-td>
					<uni-td align="center">{{checkName(item.department)}}</uni-td>
					<uni-td align="center">{{checkName(item.updater)}}</uni-td>
					<uni-td align="center">{{item.created_at}}</uni-td>
					<uni-td align="center">{{item.updated_at}}</uni-td>
					<uni-td align="center">{{item.actual_started_time}}</uni-td>
					<uni-td align="center">{{item.filter_core_precision}}</uni-td>
					<uni-td align="center">{{item.casting_thickness}}</uni-td>
					<uni-td align="center">{{item.pet_size>0?(item.pet_size+'mm'):''}}</uni-td>
					<uni-td align="center">{{item.pet_type}}</uni-td>
					<uni-td align="center">{{item.casting_thickness_2}}</uni-td>
					<uni-td align="center">{{item.pet_size2>0?(item.pet_size2+'mm'):''}}</uni-td>
					<uni-td align="center">{{item.pet_type_2}}</uni-td>
					<uni-td align="center">{{item.casting_thickness_3}}</uni-td>
					<uni-td align="center">{{item.pet_size3>0?(item.pet_size3+'mm'):''}}</uni-td>
					<uni-td align="center">{{item.pet_type_3}}</uni-td>
					<uni-td align="center">{{item.casting_thickness_4}}</uni-td>
					<uni-td align="center">{{item.pet_size4>0?(item.pet_size4+'mm'):''}}</uni-td>
					<uni-td align="center">{{item.pet_type_4}}</uni-td>
					<uni-td align="center">{{item.casting_thickness_5}}</uni-td>
					<uni-td align="center">{{item.pet_type_5}}</uni-td>
					<uni-td align="center">{{item.pet_size5>0?(item.pet_size5+'mm'):''}}</uni-td>
					<uni-td align="center">{{item.inductance_lot}}</uni-td>
					<uni-td align="center">{{item.customer_remark}}</uni-td>
				</uni-tr>
		
		
		
		
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
					:total="total" @change="change" /></view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	import * as XLSX from 'xlsx';
	import {
		saveAs
	} from 'file-saver';
	export default {
		data() {
			return {
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 15,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				//日期
				typeData:"../../工单配料.json",
				typeSelected: '1',
				selected:'1',//选中类型工序
				resp:'',//读取
				options: [{
						value: '1',
						text: '配料'
					},
					{
						value: '2',
						text: '流延'
					}
				],
			}
		},
		computed: {
			
		},
		mounted() {

		},
		onLoad() {
			
		},
		created() {
			var that = this;
			this.readData(function(data) {
				that.getData(1)
			});
		},
		methods: {
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				var tempArr = this.resp.items;
				let total = tempArr.length
				let data = tempArr.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tempArr.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}
				
				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},
			readData(callback) {
				
				var that = this;
				axios.get(this.typeData)
					.then(response => {
						this.resp = response.data;
						
						if (typeof callback != 'undefined') {
							setTimeout(() => {
								callback(this.resp);
							}, 500)

						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			//导出excel
			exportToExcel() {
				// 假设你有一个表格数据的数组

				var filename = "员工分组";
				var prix =this.selected;
				var tempArr = this.resp.items;
				if(this.selected=='1'){
					filename = "配料";
					var data = [
						["产线","干湿法","工单类型","工单编码","配方",
						"膜片类型","计划数量","单位","计划开始时间","计划结束时间",
						"产品类型","状态","部门","修改人","创建日期","修改日期",
						"开工日期","批次号","备注"],
					];

					for (var i = 0; i < tempArr.length; i++) {
						data.push([tempArr[i].prod_line_id, this.getGS(tempArr[i].product_group),
						 tempArr[i].prod_line_id,this.getGS(tempArr[i].product_group),
						 tempArr[i].order_type,tempArr[i].name,
						 tempArr[i].sm_recipe.name,this.getMPType(tempArr[i].segment3_id),
						 tempArr[i].plan_qty,tempArr[i].unit2,
						 tempArr[i].plan_start_time,tempArr[i].plan_end_time,
						 this.getPro_type(tempArr[i].pro_type),this.getStatusTxt(tempArr[i].status),
						 tempArr[i].department.name,tempArr[i].updater.name,
						 tempArr[i].created_at,tempArr[i].updated_at,
						 tempArr[i].actual_started_time,tempArr[i].inductance_lot,
						 tempArr[i].customer_remark
						 ]);
					}
				}else if(this.selected=='2'){
					filename = "流延";
						var data = [
							["产线","干湿法","工单类型","工单编码","批次号","膜片物料编码","规格型号",
							"膜片类型","计划数量","膜片物料编码2","规格型号2","计划数量2","膜片物料编码3",
							"规格型号3","计划数量3","膜片物料编码4","规格型号4","计划数量4","膜片物料编码5",
							"规格型号5","计划数量5","配方","单位","计划开始时间","计划结束时间","产品类型",
							"状态","部门","修改人","创建日期","修改日期","开工日期","滤芯精度",
							"膜厚代码","PET尺寸","PET类型","膜厚代码2","PET尺寸2","PET类型2",
							"膜厚代码3","PET尺寸3","PET类型3","膜厚代码4","PET尺寸4","PET类型4",
							"膜厚代码5","PET类型5","PET尺寸5","批次号","备注"],
						];
					for (var i = 0; i < tempArr.length; i++) {
							data.push([tempArr[i].prod_line_id,this.getGS(tempArr[i].product_group),
							 this.getOrderType(tempArr[i].order_type),tempArr[i].name,
							 tempArr[i].inductance_lot,this.checkName(tempArr[i].prod),
							 tempArr[i].spec,this.getMPType(tempArr[i].segment3_id),
							 tempArr[i].plan_qty,this.checkName(tempArr[i].prod2),
							 tempArr[i].spec2,tempArr[i].plan_qty2,
							 this.checkName(tempArr[i].prod3),tempArr[i].spec3,
							 tempArr[i].plan_qty3,this.checkName(tempArr[i].prod4),
							 tempArr[i].spec4,tempArr[i].plan_qty4,
							 this.checkName(tempArr[i].prod5),tempArr[i].plan_qty5,
							 tempArr[i].plan_qty5,tempArr[i].sm_recipe.name,
							 tempArr[i].unit2,tempArr[i].plan_start_time,
							 tempArr[i].plan_end_time,this.getPro_type(tempArr[i].pro_type),
							 this.getStatusTxt(tempArr[i].status),tempArr[i].department.name,
							 this.checkName(tempArr[i].updater),tempArr[i].created_at,
							 tempArr[i].updated_at,tempArr[i].actual_started_time,
							 tempArr[i].filter_core_precision,tempArr[i].casting_thickness,
							 tempArr[i].pet_size>0?(tempArr[i].pet_size+'mm'):'',tempArr[i].pet_type,
							 tempArr[i].casting_thickness_2,tempArr[i].pet_size2>0?(tempArr[i].pet_size2+'mm'):'',
							 tempArr[i].pet_type_2,tempArr[i].casting_thickness_3,
							 tempArr[i].pet_size3>0?(tempArr[i].pet_size3+'mm'):'',tempArr[i].pet_type_3,
							 tempArr[i].casting_thickness_4,tempArr[i].pet_size4>0?(tempArr[i].pet_size4+'mm'):'',
							 tempArr[i].pet_type_4,tempArr[i].casting_thickness_5,
							 tempArr[i].pet_type_5,tempArr[i].pet_size5>0?(tempArr[i].pet_size5+'mm'):'',
							 tempArr[i].inductance_lot,tempArr[i].customer_remark
							 ]);
						}
				}

				// 将数据转换为工作表
				const worksheet = XLSX.utils.aoa_to_sheet(data);

				// 创建工作簿并添加工作表
				const workbook = XLSX.utils.book_new();
				XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

				// 生成Excel文件
				const excelBuffer = XLSX.write(workbook, {
					bookType: 'xlsx',
					type: 'array'
				});

				// 使用blob和FileReader创建一个Blob URL
				const dataBlob = new Blob([excelBuffer], {
					type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
				});
				const blobUrl = window.URL.createObjectURL(dataBlob);

				// 使用saveAs下载文件
				saveAs(dataBlob, prix + "_" + filename + 'export' + (new Date().toLocaleDateString()) + '.xlsx');

				// 清理
				window.URL.revokeObjectURL(blobUrl);
			},
			getStatusTxt(status){
				var txt='';
				if(status=="CANCEL"){
					txt="取消";
				}else if(status=="D1"){
					txt="配料生产中";
				}else if(status=="F_D1"){
					txt="配料完成";
				}else if(status=="READY"){
					txt="准备";
				}
				else if(status=="D0"){
					txt="流延生产中";
				}else if(status=="D5"){
					txt="切膜生产中";
				}else if(status=="F_D5"){
					txt="切膜完成";
				}else if(status=="F_D0"){
					txt="流延完成";
				}
				return txt;
			},
			getMPType(type){
				var t='';
				if(type=='SFC'){
					t='生粉层'
				}else if(type=='JCF'){
					t='检瓷(磁)粉'
				}
				else if(type=='BHC'){
					t='保护层'
				}
				else if(type=='JZC'){
					t='介质层'
				}
				else if(type=='MARK'){
					t='标记'
				}
				else if(type=='SF_GF'){
					t='湿法线干法'
				}
				else if(type=='SF_SF'){
					t='湿法线湿法'
				}
				else if(type=='HSF'){
					t='黑生粉'
				}
				else if(type=='BSF'){
					t='白生粉'
				}
				else if(type=='SF_NTC'){
					t='湿法线NTC'
				}
				else if(type=='SF_VDR'){
					t='湿法线压敏'
				}
				return t;
			},
			getPro_type(type){
				var t='常规';
				if(type=='B'){
					t='常规'
				}else if(type=='A'){
					t='车规'
				}
				return t;
			},
			getGS(type){
				var t='湿法';
				if(type=='SF'){
					t='湿法'
				}else if(type=='GF'){
					t='干法'
				}else if(type=='COM'){
					t='通用'
				}
				return t;
			},
			getOrderType(type){
				var t='';
				if(type=='SM'){
					t='砂磨工单'
				}
				else if(type=='FLOW'){
					t='流延工单'
				}else{
					t=type;
				}
				return t;
			},
			checkName(obj){
				var name='';
				if(obj!=null){
					name=obj.name;
				}
				return name;
			},
			handleSelectChange(e) {
			
				var that = this;
				if (this.selected == "1") {
					this.typeData = "../../工单配料.json";
					this.readData(function(data) {
						that.getData(1)
					});
				} else if (this.selected == "2") {
					this.typeData = "../../工单流延.json";
					this.readData(function(data) {
						that.getData(1)
					});
				} 
			},
		}
	}
</script>

<style>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	.uni-group {
		display: flex;
		align-items: center;
	}
</style>